<template>
	<view class="page_body grey_bg">

		<!-- 导航栏 -->
		<u-navbar title="" :autoBack="false" title="评论" @leftClick="closePopup">
			<!-- <view slot="right" style="float: left;margin-right: 10px;" @tap="$u.toast('插槽被点击')" >
				<u-icon name="search" size="30" ></u-icon>
			</view> -->
		</u-navbar>



		<mescroll-uni ref="mescrollRef" top="45px" :height="windowHeight" @init="mescrollInit" :down="downOptions" :up="upOptions" 
					 @up="upBack" @down="downBack" @scroll="pageScroll">

			<!-- 父级评论 -->
			<view class="article_item">

				<!-- 评论人信息 -->
				<Commentator :user-info="commentData.poster"></Commentator>

				<!-- 评论详情 -->
				<text class="article_content">{{commentData.content}}</text>

				<!-- 图片、视频 -->
				<file-list :data-list="commentData.fileList" @video_play="videoPlayBack"></file-list>

				<!-- 该评论分享、点赞信息、回复数量 -->
				<comment-footer :data-obj="commentData" :show-reply-btn="false"></comment-footer>

			</view>


			<!-- 排序方式 -->
			<view class="comment_head_box">
				<text class="comment_head_title">评论</text>
				<text :class="sort==2?'comment_head_sort_activity':'comment_head_sort'"
					@click="orderChange(2)">最热</text>
				<text :class="sort==1?'comment_head_sort_activity':'comment_head_sort'"
					@click="orderChange(1)">最新</text>
			</view>


			<!-- 回复详情 -->
			<view class="comment_box" v-for="(item,index) in dataList" :key="index">

				<!-- 评论人信息 -->
				<Commentator :user-info="item.poster"></Commentator>

				<view class="comment_content">
					<!-- 回复内容 -->
					<text class="comment_text">{{item.content}}</text>

					<!-- 图片、视频 -->
					<file-list :data-list="item.fileList" @video_play="videoPlayBack"></file-list>

					<!-- 评论点赞数量等 -->
					<comment-footer :data-obj="item" @replyBack="replyBtnClick" :need-back-data="true"></comment-footer>
				</view>



				<!-- 子回复详情 -->
				<view v-for="(ison,ii) in item.sonList" :key="ii" class="son_comment_box">

					<!-- 评论人信息 -->
					<Commentator :user-info="ison.poster" :small="true"></Commentator>

					<view class="son_comment_content">

						<!-- 回复人 -->
						<text v-if="ison.repostedUser" style="font-size: 15px;line-height: 25px;margin-right: 4px;">回复</text>
						<text v-if="ison.repostedUser" class="son_comment_text_reply_user">@{{ison.repostedUser.displayName}}</text>

						<!-- 回复文字 -->
						<text style="font-size: 15px;line-height: 25px;margin-right: 4px;">：</text>
						<text class="son_comment_text">{{ison.content}}</text>

						<!-- 图片、视频 -->
						<file-list :data-list="ison.fileList" @video_play="videoPlayBack"></file-list>

						<!-- 评论点赞数量等 -->
						<comment-footer :data-obj="ison" @replyBack="sonReplyBtnClick" :need-back-data="true"></comment-footer>
					</view>
				</view>


			</view>



		</mescroll-uni>


		<!-- 视频播放 -->
		<video-play ref="play"></video-play>

		<!-- 底部回复输入框 -->
		<comment-input ref="sonCommentInput" style="z-index: 998;" @replySuccess="getCommentList()"
				:rootId="commentData.id" :article-id="articleId" @popupOpen="inputpopupOpen"
				@video_play="videoPlayBack"	 >
		</comment-input>



	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import textOverflow from "@/components/textOverflow.vue";
	import FileList from "@/components/file/fileList.vue";
	import CommentFooter from "@/components/comment/commentFooter.vue";
	import Commentator from "@/components/comment/commentator.vue";
	import commentInput from "@/components/comment/commentInput.vue";
	import VideoPlay from "@/components/file/videoPlay.vue";
	export default {
		props: {
			// 文章id
			articleId: {
				type: String,
				default () {
					return ''
				}
			}
		},
		components: {
			Commentator,
			textOverflow,
			FileList,
			CommentFooter,
			commentInput,
			VideoPlay
		},
		mixins: [MescrollMixin],
		data() {
			return {
				downOptions: {
					use: false,
					// 不自动加载
					auto: false,
				},
				// 上拉加载的配置参数
				upOptions: {
					use: true,
					// 不自动加载
					auto: false,
					// 列表已无数据,列表的总数量要大于4才显示无更多数据
					noMoreSize: 4,
					// 空数据提示
					empty: {
						tip: '~ 空空如也 ~',
						btnText: '去看看'
					},
					toTop: {
						src: ''
					}
				},
				// 页面高度
				windowHeight: null,
				// 排序方式
				sort: 2,
				// 当前页
				currentPage: 1,
				// 分页大小
				pageSize: 12,
				// 父评论
				commentData: {
					poster:{ avatar: ''}
				},
				// 子评论数据
				dataList: [],
				// 没有更多了
				noMore: false,
				// 数据加载中
				loading: false,
			}
		},

		created() {
			const res = uni.getSystemInfoSync();
			this.windowHeight = res.windowHeight - 51 + 'px'
		},

		methods: {
			init(val) {
				this.commentData = val
				this.getCommentList()
			},
			// 播放视频
			videoPlayBack(url){
				this.$nextTick(()=>{
					this.$refs.play.initPlay(url)
				})
			},
			// 获取列表数据
			getCommentList() {
				if (this.loading) {
					return
				}
				let form = {
					page: this.currentPage,
					size: this.pageSize,
					sort: this.sort
				}
				this.loading = true
				this.$httpApi.baseCommentGet('open/reply/getSonList/article/' + this.commentData.id, form).then(({data}) => {
					this.loading = false
					if (data.code == "000000") {
						this.dataList = data.data.records
						this.noMore = data.data.records.length < this.pageSize
						this.mescroll.endSuccess(data.data.records.length, !this.noMore)
					} else {
						this.mescroll.endErr()
						this.$refs.uToast.show({type: 'error',icon: false,message: data.mesg})
					}
				}).catch(err => {
					this.mescroll.endErr()
					this.loading = false
				})
			},
			// 加载更多
			getMoreList() {
				if (this.loading || this.noMore || !this.hasLogin) {
					return
				}
				let form = {
					page: this.currentPage + 1,
					size: this.pageSize,
					contentType: ''
				}
				this.loading = true
				this.$httpApi.baseCommentGet('open/reply/getSonList/article/' + this.commentData.id, form).then(({data}) => {
					this.loading = false
					if (data.code == "000000") {
						if (data.data.records && data.data.records.length > 0) {
							this.currentPage += 1
							this.dataList = [...this.dataList, ...data.data.records];
						}
						this.noMore = data.data.records.length < this.pageSize
						this.mescroll.endSuccess(data.data.records.length, !this.noMore)
					} else {
						this.mescroll.endErr()
						this.$refs.uToast.show({type: 'error',icon: false,message: data.mesg})
					}
				}).catch(err => {
					this.mescroll.endErr()
					this.loading = false
				})
			},
			// 回复按钮点击
			replyBtnClick(val){
				this.$refs.sonCommentInput.replyUser(val)
			},
			// 子评论回复按钮点击
			sonReplyBtnClick(val){
				this.$refs.sonCommentInput.replyUser(val,true)
			},
			// 评论发布成功
			replySuccessBack(){
				this.getCommentList()
			},
			// 页面的滚动事件
			pageScroll(e) {
				this.$nextTick(()=>{
					this.$refs.sonCommentInput.componentBulr()
				})
			},	
			// 下拉刷新
			downBack(page) {
				// this.currentPage= 1
				// this.pageSize = 12
				// this.getCommentList()
			},
			//上拉加载
			upBack(page) {
				this.getMoreList()
			},
			// 关闭弹窗
			closePopup(){
				this.$emit('popupClose')
			}
		

		}
	}
</script>

<style lang="scss" scoped>
	// 评论排序
	.comment_head_box {
		display: flex;
		flex: 1;
		padding: 10px;
		flex-direction: row;
		border-bottom-color: #f5f5f5;
		border-bottom-width: 1px;
		padding-top: 15px;
		background-color: #FFFFFF;
	}

	.comment_head_title {
		font-size: 16px;
		flex: 1;

	}

	.comment_head_sort {
		padding: 0 5px;
		font-size: 13px;
		color: #666;
	}

	.comment_head_sort_activity {
		padding: 0 5px;
		font-size: 13px;
		color: #666;
		font-weight: bold;
	}

	// 评论最顶级父类
	.comment_box {
		background-color: #FFFFFF;
		padding: 10px 12px;
		margin-bottom: 1px;
	}

	.comment_item {
		display: flex;
		flex: 1;
		flex-direction: row;
	}

	.comment_head {
		display: flex;
		flex: 1;
	}


	// 评论用户头像
	.comment_user_photo {
		width: 60upx;
		height: 60upx;
		border-radius: 60upx;
		margin-right: 6px;
	}

	/* 评论者姓名/时间 */
	.comment_right_box {
		display: flex;
		flex: 1;
		flex-direction: column;
		border-bottom-color: #f9f9f9;
		border-bottom-width: 1px;
		padding-bottom: 10px;
	}

	/* 评论者姓名/时间 */
	.comment_user_center {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	/* 评论者姓名/时间 */
	.comment_user_info {
		flex-direction: row;
		align-items: center;
		flex: 1;
		display: flex;
	}

	// 评论者姓名
	.comment_user_nick {
		font-size: 14px;
		color: #666666;
		font-weight: bold;
		line-height: 31px;
	}


	// 评论主体
	.comment_content {
		padding-left: 60upx;
	}

	/* 评论文字 */
	.comment_text {
		color: #000000;
		text-align: left;
		font-size: 15px;
		line-height: 20px;
		word-break: break-all;
		word-wrap: break-word;
		white-space: pre-wrap;
	}

	/* 评论图片父类 */
	.comment_imgs {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	/* 评论图片 */
	.comment_img {
		border-radius: 4px;
		margin: 3upx 3upx -2px 3upx;
		width: 208upx;
		height: 208upx;
	}

	// 评论底部
	.comment_footer {
		display: flex;
		flex: 1;
		padding-top: 6px;
		padding-bottom: 10px;
	}

	.comment_time {
		font-size: 12px;
		color: #999999;
		margin-right: 10px;
	}

	.comment_footer_opt_img {
		width: 17px;
		height: 17px;
		position: relative;
		margin-left: 15px;
	}

	.comment_footer_opt_img_mar_right {
		width: 17px;
		height: 17px;
		position: relative;
		margin-right: 25px;
		margin-left: 15px;
	}

	.comment_footer_opt_txt {
		text-align: center;
		margin-left: 10px;
		width: 30px;
		line-height: 17px;
		font-size: 14px;
		color: #43484D;
	}



	/* 子子评论 */
	.son_comment_box {
		padding: 10px 0 10px 60upx;
	}

	/* 子子评论用户头像 */
	.son_comment_user_photo {
		width: 50upx;
		height: 50upx;
		border-radius: 60upx;
		margin-right: 6px;
	}

	.son_comment_right_box {
		flex: 1;
		flex-direction: column;
		border-bottom-color: #f9f9f9;
		border-bottom-width: 1px;
		padding-bottom: 10px;
	}

	.son_comment_head {
		flex-direction: row;
	}


	.son_comment_user_right {
		flex-direction: row;
	}

	.son_comment_user_opt {
		flex-direction: row;
		align-items: center;
	}

	/* 点赞 */
	.son_comment_opt_img {
		width: 15px;
		height: 15px;
	}

	.son_comment_opt_txt {
		font-size: 13px;
		color: #555;
		margin-left: 5px;
	}

	.son_comment_opt_txt_active {
		color: #1296db;
	}

	// 评论主体
	.son_comment_content {
		padding-left: 10upx;
	}

	.son_comment_text_reply_user {
		font-size: 15px;
		line-height: 20px;
		color: #007AFF;
		text-align: left;
	}

	.son_comment_text {
		color: #000000;
		text-align: left;
		font-size: 15px;
		line-height: 25px;
	}

	.son_comment_imgs {

		width: 610rpx;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-top: 9px;
		margin-bottom: 9px;

	}

	.son_comment_img {
		width: 190upx;
		height: 190upx;
		border-radius: 4px;
		margin: 3upx 3upx -2px 3upx;
	}

	.noData {
		font-size: 13px;
		text-align: center;
		justify-content: center;
		color: #999999;
		padding: 15px 0;
	}






	/*************刷新按钮****************/
	/* 	.operation_box {
		position: fixed;
		right: 20px;
		bottom: 50px;
	}

	.refresh_box {
		width: 35px;
		height: 35px;
		border-radius: 35px;
		border-width: 1px;
		border-style: solid;
		border-color: #eaeaea;
		background-color: #FFFFFF;
		align-items: center;
		justify-content: center;
		margin-bottom: 10px;
	}


	.jh_nav_head_article {
		border-bottom-width: 1px;
		border-bottom-color: #f5f5f5;
	}

	.jh_nav_right_article {
		margin-top: 10px;
	} */

	/*********内容***********/
	/* 
	.list_box {
		background-color: #FFFFFF;
	}

	.cell_margin {
		padding: 10px;
	}

	.cell_bg {
		background-color: #f5f5f5;
	}

	.user_box {
		flex: 1;
		flex-direction: row;
	}

	.user_photo {
		width: 40px;
		height: 40px;
		border-radius: 40px;
		margin-right: 10px;
	}

	.user_info {
		flex: 1;
		flex-direction: column;
	}

	.user_title_info {
		flex-direction: row;
		align-items: center;
		margin: 3px 0;
	}

	.user_des {
		flex-direction: row;
	}

	.user_nick {
		font-size: 15px;
		color: #666666;
	}

	.user_tag {
		font-size: 12px;
		color: #999999;
		margin-right: 10px;
	}

	.btn_follow {
		padding: 5px 13px;
		font-size: 13px;
		border-style: solid;
		border-width: 1px;
		border-color: #007AFF;
		color: #007AFF;
		border-radius: 20px;
		align-items: center;
		margin-top: 5px;
	}

	.article_content_box {
		flex: 1;
		flex-direction: column;
		margin: 10px 0;
	}

	.article_content {
		font-size: 15px;
		color: #222222;
		line-height: 25px;
	}

	.article_content_imgs {
		flex: 1;
		flex-direction: row;
		lines: 2;
		margin: 10px 0;
		flex-wrap: wrap;
	}

	.article_img {
		width: 220upx;
		margin: 0 5px;
		border-radius: 5px;
		height: 220upx;
	} */

	/*********分类**********/






	/*************输入框***************/

	.footer_box_height {
		height: 45px;
		flex-direction: row;
	}

	.footer_input_box {
		border-top-color: #F5F5F5;
		border-top-width: 1px;
		background-color: #FFFFFF;
		flex-direction: row;
		align-items: center;
		align-items: flex-start;
		flex: 1;
	}

	.footer_input_content {
		flex-direction: column;
		flex: 1;
	}

	.footer_box_fixed {
		position: fixed;
		bottom: 0px;
		left: 0px;
		right: 0px;
	}

	.input_none {
		flex: 1;
		flex-direction: row;
		align-items: center;
		margin: 6px 10px;
	}

	.input_none_right {
		flex-direction: row;
	}

	.input_display {
		border-radius: 30px;
		background-color: #f1f1f1;
		color: #333333;
		font-size: 15px;
		flex: 1;
		padding: 8px 10px;
	}

	.input_img {
		width: 25px;
		height: 25px;
		margin-left: 12px;
	}

	.footer_hight {
		height: 50px;
	}


	.input_placeholder {
		color: #999999;
	}
</style>
